<template>
  <div class="bigbox">
    <div class="liftbox">
      <div class="lifttop">
        <el-input
          placeholder="请输入检索关键字"
          suffix-icon="el-icon-search"
          v-model="input1"
          style="width: 300px;height: 32px;"
          @keyup.enter.native="changeinput"
          size="medium">
        </el-input>
        <span @click="dialogVisible=true"><i class="el-icon-plus" style=" cursor: pointer;"></i></span>
      </div>
      <div style="height: 95%;">
        <template>
          <el-table
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            border
            height="calc(100% - 1px)"
            style="width: 100%">
            <el-table-column
              prop="typeCode"
              label="型号编码"
              width="100">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="型号名称"
              >
              <template #default="{row}">
                <div style="display: flex;justify-content: space-between;">
                  <div><span>{{ row.typeName }}</span></div>
                  <div v-show="row.typeCode===typeCode">
                    <span @click="putlist(row)" class="littleicon"><i class="el-icon-edit" style="color: skyblue;cursor: pointer; " ></i></span>
                    <span @click="dellist(row)"><i class="el-icon-delete" style="color: red;cursor: pointer; " ></i></span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <div>
          <template>
            <el-select v-model="form.region" clearable   placeholder="测点回路"   size="medium" style="margin-right: 10px;" @change="select">
              <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="item.value"
              style="padding-left: 10px;"></el-option>
            </el-select>
            <el-input  placeholder="请输入测点名称搜索"
            @keyup.enter.native="changeinput1"
             suffix-icon="el-icon-search"  v-model="input2"  style="width: 200px;height: 32px;" size="medium"></el-input>
          </template>
        </div>
        <div class="button">
          <el-button @click="$refs.dialogself.dialogVisible=true" type="primary" size="small">新 增</el-button>
          <el-button @click="$refs.dialogfuzhi.dialogVisible=true" size="small">复制新增</el-button>
          <el-button @click="pilianggai" size="small">批量修改</el-button>
          <el-button @click="pidelete" size="small">批量删除</el-button>
          <el-button @click="piliangqi" size="small">批量启用</el-button>
          <el-button @click="piting" size="small">批量停用</el-button>
        </div>
      </div>
      <div style="height: 88%;">
        <template>
          <el-table
            ref="multipleTable"
            :data="tableDatas"
            border
            v-loading="loading"
            height="calc(100% - 1px)"
            :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              align="center"
              width="55">
            </el-table-column>
            <el-table-column
            label="测点回路"
            width="150"
            prop="itemLoops">
            <template #default="{row}">
              <span>{{ xlalalist.filter(ele=>ele.value==row.itemLoops)[0].text }}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="itemTag"
            width="150"
              label="测点标识">
            </el-table-column>
            <el-table-column
              prop="itemName"
              label="测点名称">
            </el-table-column>
            <el-table-column
              prop="dataAddress"
              label="测点地址">
            </el-table-column>
            <el-table-column
            label="转换公式"
            prop="convertType">
            <template #default="{row}">
             <span>{{ row.convertType==='CT'?'电流变比转换'
             :row.convertType==='PT'?'电压变比转换':row.convertType==='CTPT'?'电流电压变比转换':'' }}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="itemGroup"
            width="120"
              label="测点分组">
              <template #default="{row}">
                <span>{{ row.itemGroup==='1'?'负荷信息'
                :row.itemGroup==='0'?'工况遥信'
                :row.itemGroup==='6'?'电能信息'
                :row.itemGroup==='8'?'环境信息'
                :row.itemGroup==='9'?'电能质量'
                :row.itemGroup==='7'?'电网矢量'
                :row.itemGroup==='2'?'控制信息'
                :row.itemGroup==='20'?'水热信息':'其他'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="itemEnabled"
              width="120"
              label="启用状态"
              align="center">
              <template #default="{row}">
                <el-switch v-model="row.itemEnabled" @change="changeswitch(row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              width="140"
              align="center">
              <template #default="{row}">
                <span v-if="row.dataType=='YC'" @click="$refs.ElDialogsrefs.getmethod(row,'templateItemId')"><i class="iconfont icon-gaojing1" style="color: skyblue;  cursor: pointer;"></i></span>
                <span @click="putlists(row)"><i class="el-icon-edit" style="color: skyblue; margin:0 20px; cursor: pointer;"></i ></span>
                <span @click="dandel(row)"><i class="el-icon-delete" style="color: red;  cursor: pointer;"></i></span>
            </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getmubanlist(row,form.region)"
            :page-size="20"
            :total="total"
          >
          </el-pagination>
      </div>
      <div>
        <el-dialog
            title="型号信息维护"
            :visible.sync="dialogVisible"
            width="30%"
            :showClose="false"
            >
            <div>
              <el-form :model="formdata"  label-width="140px" :rules="rules" ref="refform">
                <el-form-item label="采集通道:" prop="channelTag">
                  <el-select v-model="formdata.channelTag" placeholder="请选择采集通道" style="width: 250px;" size="mini" :disabled="isshow">
                    <el-option class="select" v-for="(item,index) in xlalalists" :key="index" :label="item.text" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="型号编码:" prop="typeCode" size="80" >
              <el-input v-model="formdata.typeCode" style="width: 250px;" size="mini" :disabled="isshow"></el-input>
            </el-form-item>
            <el-form-item label="型号名称:" prop="typeName">
              <el-input v-model="formdata.typeName" style="width: 250px;" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="型号描述:" prop="typeExplain">
              <el-input type="textarea" :rows="4" v-model="formdata.typeExplain" style="width: 250px;" size="mini"></el-input>
            </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="margin-right: 60px;">
              <el-button  type="primary" @click="submit" size="small">确 定</el-button>
              <el-button  @click="quxiao" size="small"> 取 消</el-button>
            </span>
          </el-dialog>
      </div>
      <!-- 告警配置 -->
      <ElDialogs ref="ElDialogsrefs"></ElDialogs>
      <!-- 新增弹框组件 -->
      <DialogSelf
      ref="dialogself"
      @shuxing="shuxing"
      :row="row">
    </DialogSelf>
      <!-- 批量修改遥测数据类型组件 -->
      <DialogYaoce
      ref="dialogyaoce"
      :changeselect="changeselect"
      @shuxing="shuxing">
    </DialogYaoce>
    <!-- 批量修改遥信数据类型组件 -->
    <DialogYaoxin
    ref="dialogyaoxin"
    :changeselect="changeselect"
    @shuxing="shuxing"
    ></DialogYaoxin>
    <!-- 批量修改累计数据类型组件 -->
    <DialogLeiji
    ref="dialogleiji"
    :changeselect="changeselect"
    @shuxing="shuxing"
    >
    </DialogLeiji>
    <!-- 批量修改遥控数据类型组件 -->
    <DialogYaokong
    ref="dialogyaokong"
    :changeselect="changeselect"
    @shuxing="shuxing"
    ></DialogYaokong>
    <!-- 批量修改遥调数据类型组件 -->
    <DialogYaotiao
    ref="dialogyaotiao"
    :changeselect="changeselect"
    @shuxing="shuxing"
    ></DialogYaotiao>
    <!-- 复制新增功能组件 -->
     <DialogFuzhi
     ref="dialogfuzhi"
     :tableData="tableData"
     :typeCode="typeCode"
     @shuxing="shuxing"
     ></DialogFuzhi>
    </div>
  </div>
</template>
<script>
import { cdhlxialaapi, getmubanlistapi, postpiltingapi, postpilqiapi, delpiliangapi,getTemplateListapi } from '@/api/ElectricalDistribution/IotTechnology/measure'
import { getbiaojilistapi, getxialalistapi, postbiaojiapi, delbiajiapi, putbiaojiapi } from '@/api/ElectricalDistribution/IotTechnology/meter'
import DialogSelf from './dialog.vue'
import DialogYaoce from './yaoce.vue'
import DialogYaoxin from './yaoxin.vue'
import DialogLeiji from './leiji.vue'
import DialogYaokong from './yaokong.vue'
import DialogYaotiao from './yaotiao.vue'
import DialogFuzhi from './fuzhi.vue'
import ElDialogs from '../component/dialog-el.vue'
export default {
  name: 'MaintenanceIndex',
  components: {
    DialogSelf,
    DialogYaoce,
    DialogYaoxin,
    DialogLeiji,
    DialogYaokong,
    DialogYaotiao,
    DialogFuzhi,
    ElDialogs
  },
  data () {
    return {
      isshow: false,
      push: '',
      row: '',
      number: '',
      typeCode: '',
      dialogVisible: false,
      tableDatas: [],
      tableData: [],
      input1: '',
      xlalalist: [],
      input2: '',
      form: {},
      formdata: {},
      xlalalists: [],
      changeselect: [],
      rules: {
        channelTag: [
          { required: true, message: '采集通道必填', trigger: 'blur' }
        ],
        typeCode: [
          { required: true, message: '型号编码必填', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '型号名称必填', trigger: 'blur' }
        ]
      },
      total: 0,
      pageNo: 0,
      pageSize: 20,
      loading:false
    }
  },

  async mounted () {
    const res = await cdhlxialaapi()
    const ress = await getxialalistapi()
    this.xlalalists = ress.data.list
    this.xlalalist = res.data.list
    await this.getcedianlei()
    this.getmubanlist(this.tableData[0].typeCode)
    this.row = this.tableData[0].typeCode
    this.typeCode = this.tableData[0].typeCode
  },
  methods: {
    async getcedianlei () {
      const ress = await getbiaojilistapi()
      this.tableData = ress.data.list
    },
    async getmubanlist (val, fenzu) {
      this.loading=true
      const pageNo=this.pageNo-1
      // const {data:{list,totalCount}} = await getmubanlistapi({ meterType: val, itemLoop: fenzu, })
      const {data:{list,totalCount}} = await getTemplateListapi({ meterType: val, itemLoop: this.form.region,pageSize:this.pageSize,pageNo,keyword:this.input2 })
      this.total=totalCount
      this.tableDatas = list
      this.loading=false
    },
    handleCurrentChange (val) {
      this.row = val.typeCode
      this.getmubanlist(val.typeCode,this.form.region)
      this.typeCode = val.typeCode
      console.log(this.typeCode)
    },
    changeinput () {
      this.tableData = this.tableData.filter(ele => ele.typeName.indexOf(this.input1) !== -1)
      this.getmubanlist(this.tableData[0].typeCode,this.form.region)
    },
    select (val) {
      this.number = val
      this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, val)
    },
    changeinput1 () {
      this.getmubanlist(this.row)
    },
    quxiao () {
      this.dialogVisible = false
      this.formdata = {}
      this.push = ''
      this.isshow = false
    },
    async submit () {
      const { typeCode, typeExplain, typeName } = this.formdata
      console.log(this.formdata)
      this.push ? await putbiaojiapi({ typeExplain, typeName, typeCode }) : await postbiaojiapi(this.formdata)
      this.push ? this.$message.success('修改成功') : this.$message.success('新增成功')
      await this.getcedianlei()
      this.dialogVisible = false
      this.formdata = {}
      this.push = ''
      this.isshow = false
    },
    putlist (row) {
      this.dialogVisible = true
      this.formdata = { ...row }
      this.push = row
      this.isshow = true
    },
    dellist (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delbiajiapi({ typeCode: row.typeCode })
        if (res.code === 200) {
          this.$message.success('删除成功')
        }
        await this.getcedianlei()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.changeselect = val
    },
    async piting () {
      if (this.changeselect.length === 0) return this.$message.warning('请先勾选')
      const arr = this.changeselect.map(ele => ele.id)
      console.log(arr)
      await postpiltingapi(arr)
      this.$message.success('停用成功')
      this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number)
    },
    async piliangqi () {
      if (this.changeselect.length === 0) return this.$message.warning('请先勾选')
      const arr = this.changeselect.map(ele => ele.id)
      await postpilqiapi(arr)
      this.$message.success('启用成功')
      this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number)
    },
    pidelete () {
      if (this.changeselect.length === 0) return this.$message.warning('请先勾选')
      const arr = this.changeselect.map(ele => ele.id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delpiliangapi(arr)
        if (res.code === 200) {
          this.$message.success('删除成功')
        }
        this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    dandel (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delpiliangapi(row.id)
        if (res.code === 200) {
          this.$message.success('删除成功')
        }
        this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    pilianggai () {
      if (this.changeselect.length === 0) return this.$message.warning('请先勾选')
      if (this.changeselect.every(ele => ele.dataType === 'YC')) {
        this.$refs.dialogyaoce.dialogVisible = true
      } else if (this.changeselect.every(ele => ele.dataType === 'YX')) {
        this.$refs.dialogyaoxin.dialogVisible = true
      } else if (this.changeselect.every(ele => ele.dataType === 'LJ')) {
        this.$refs.dialogleiji.dialogVisible = true
      } else if (this.changeselect.every(ele => ele.dataType === 'YK')) {
        this.$refs.dialogyaokong.dialogVisible = true
      } else if (this.changeselect.every(ele => ele.dataType === 'YT')) {
        this.$refs.dialogyaotiao.dialogVisible = true
      } else {
        this.$message.warning('请勾选同一数据类型的数据进行批量修改')
      }
    },
    shuxing () {
      this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number)
    },
    putlists (row) {
      this.changeselect = [row]
      console.log(row)
      if (row.dataType === 'YC') {
        this.$refs.dialogyaoce.dialogVisible = true
      } else if (row.dataType === 'YX') {
        this.$refs.dialogyaoxin.dialogVisible = true
      } else if (row.dataType === 'LJ') {
        this.$refs.dialogleiji.dialogVisible = true
      } else if (row.dataType === 'YK') {
        this.$refs.dialogyaokong.dialogVisible = true
      } else if (row.dataType === 'YT') {
        this.$refs.dialogyaotiao.dialogVisible = true
      }
    },
    async changeswitch (row) {
      console.log(row)
      if (row.itemEnabled) {
        await postpilqiapi([row.id])
        this.$message.success('启用成功')
        this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number)
      } else {
        await postpiltingapi([row.id])
        this.$message.success('停用成功')
        this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number)
      }
    }
  },
  watch: {
    async input1 (val) {
      if (!val) {
        await this.getcedianlei()
        this.getmubanlist(this.tableData[0].typeCode)
      }
    },
    input2 (val) {
      setTimeout(()=>this.getmubanlist(this.typeCode ? this.typeCode : this.tableData[0].typeCode, this.number),500)
    }
  }
}
</script>

<style lang="scss" scoped>
.littleicon{
  margin: 0 5px;
}
.sure{
  background-color: #1890ff;
  color: #fff;
  margin-right: 10px;
}
.bigbox{
  padding:10px;
  background-color:#f1f1f1;
  display:flex;
  // justify-content:space-between;
  justify-content: flex-start;
  box-sizing:border-box;
  height: 100%;
}
.liftbox{
  padding:10px;
  width:350px !important;
  background-color:#fff;
  box-sizing:border-box;
  height: 100%;
}
.lifttop{
  margin-bottom:10px;
}
.fenye{
  margin-top: 10px;
  text-align: right;
}
.newzeng{
  width: 60px !important;
  height: 30px;
  background-color: #1890ff !important;
  color: #fff;
}
.lifttop span{
  margin-left:10px;
}
.rightbox{
  padding: 10px;
  background-color: #fff;
  margin-left: 10px;
  height: 100%;
  width: calc(100% - 360px);
}
.righttop{
  display:flex;
  justify-content:space-between;
  margin-bottom: 5px;
}
</style>
